﻿<div id="tb">
    <table cellpadding="0" cellspacing="0" style="width: 100%">
        <tr>
            <td>                
                <a href="#" class="easyui-linkbutton" onclick="javascript: $('#dg').datagrid('mfInsertRow');" iconcls="iconfont iconfont-jia1" plain="true">增加</a>
                <a href="#" class="easyui-linkbutton" onclick="thisDeleteRow()" iconcls="iconfont iconfont-shanchu" plain="true">删除</a>
                <a href="#" class="easyui-linkbutton" onclick="javascript: $('#dg').datagrid('mfMoveUp')" iconcls="iconfont iconfont-xiangshang" plain="true">上移</a>
                <a href="#" class="easyui-linkbutton" onclick="javascript: $('#dg').datagrid('mfMoveDown')" iconcls="iconfont iconfont-paixu" plain="true">下移</a>                
                <a href="#" class="easyui-linkbutton" onclick="javascript: $('#dg').datagrid('mfSaveRows',true)" iconcls="iconfont iconfont-baocun" plain="true">保存修改</a>
            </td>
        </tr>
    </table>
</div>
 
<table id="dg" rownumbers="true" fit="true" pagination="false" fitcolumns="false" striped="true" border="false" idfield="FieldName"
       autorowheight="false" toolbar="#tb" singleselect="false" data-options="onBeforeCellEdit:beforeCellEdit,rowStyler:rowStyler">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th field="FieldName" width="150" halign='center' editor="{type:'validatebox',options:{required:true}}" data-options="styler:cellStyler">
                字段名
            </th>
            <th field="FieldType" width="100" halign='center' align="center" data-options="styler:cellStyler"
                editor="{type:'combobox',options:{data:ControlFieldType,panelHeight:'200px',required:true}}">
                字段类型
            </th>
            <th field="CtrlType" width="100" halign='center' align="center" formatter="ControlTypeFormatter"
                 editor="{type:'combobox',options:{data:ControlType,panelHeight:'200px',required:true,editable:false}}">
                控件类型
            </th>
            <th field="ColumnName" width="150" halign='center' editor="{type:'validatebox'}">
                字段描述
            </th>
            <th field="DefaultValue" width="150" halign='center' formatter="DefaultValueSymbolFormatter"
                editor="{type:'combobox',options:{data:DefaultValueSymbol,required:false,panelHeight:'auto'}}">
                初始值
            </th>
            <th field="IsVisible" width="100" halign='center' align="center" editor="{type:'checkbox',options:{on:'是',off:'否'}}">
                是否显示
            </th>
            <th field="Enable" width="100" halign='center' align="center" editor="{type:'checkbox',options:{on:'是',off:'否'}}">
                是否有效
            </th>
            <th field="Group" width="100" halign='center' align="center" editor="{type:'combobox',options:{data:ctrlGroup,panelHeight:'auto',textField:'Name',valueField:'Name'}}">
                控件组
            </th>
            <th field="Detail" width="100" halign='center'>
                详细设置
            </th>
        </tr>
    </thead>
</table>
<script>
    @Html.GetEnumWithFormatter(typeof(MF_Base.ControlType));
    @Html.GetEnumWithFormatter(typeof(MF_Base.DefaultValueSymbol));
    var ControlFieldType = @Html.Raw(ViewBag.FieldType);
    var ctrlGroup = @Html.Raw(@ViewBag.CtrlGroup);
</script>

<script>
    var formId = queryString('Id')
    addGridBtn('dg', 'Detail', {
        linkText: '详细设置',
        JustShowLinkText: true,
        onButtonClick: function (row, index) {
            if (!$('#dg').datagrid('endEditingCell')) {
                return;
            }

            var url = '/AutoUI/ConfigUIDef/FormCtrlDetail/' + row.CtrlType;

            var width = 400;
            if (row.CtrlType == 'SubDataGrid') {
                width = '80%';
                url += '?formId=' + formId + "&fieldName=" + row.FieldName;
            }

            openWindow(url, {
                width: width, height: '80%',
                data: row.Detail,
                onDestroy: function (res) {
                    if (res) {
                        $('#dg').datagrid('mfUpdateRow', {
                            index: index,
                            row: {
                                Detail: JSON.stringify(res)
                            }
                        });
                    }
                }
            });
        }
    });

    $('#dg').datagrid({
        url: 'GetCtrlList',
        saveUrl: 'SaveCtrl?formId=' + formId,
        queryParams: { formId: queryString('Id') }
    }).datagrid('enableCellEditing');

    function beforeCellEdit(index, field) {
        var selectRow = $(this).datagrid('getRows')[index];
        //子表字段的子表控件类型一般在首次加载已经赋予,这里使子表字段只能应用子表控件类型不能改
        if (selectRow.CtrlType == 'SubDataGrid'
            && field == 'CtrlType')
        {
            return false;
        }
        else if(selectRow.CtrlType == 'PopupSelector' && field == 'CtrlType')
        {
            var detailJson = selectRow.Detail;
            if(detailJson && detailJson != '')
            {
                var detailObj = JSON.parse(detailJson);
                if(detailObj && detailObj.ForeignTableName && detailObj.ForeignTableName != '')
                {
                    return false;
                }
            }            
        }
        //配置增加的控件
        if (!selectRow.IsDevelopField || selectRow.IsDevelopField != 'true')
        {
            ////只做显示,不可输入因此默认为insertDisplayCtrl增加的row对应属性
            //if (field == 'FieldType' || field == 'CtrlType')
            //{
            //    return false;
            //}
        }
        else
        {
            //开发级字段跟类属性保持一致
            if (field == 'FieldName' || field == 'FieldType') {
                return false;
            }
        }
    }

    function thisDeleteRow()
    {
        var selectedRows = $('#dg').datagrid('getSelections');
        if (!selectedRows || selectedRows.length == 0) return msgBox('请选择要删除的行')
        
        if ($.grep(selectedRows, function (item, index) { return item.IsDevelopField && item.IsDevelopField == 'true' }).length > 0)
        {
            return msgBox('开发级字段不能删除');
        }

        confirmBox('是否删除?', function (r) {
            if (r) {
                var fieldNameArr = selectedRows.map(function (v) { return v.FieldName });
                var fieldNames = fieldNameArr.join(',');
                addAjaxParam("formId", formId);
                addAjaxParam("fieldNames", fieldNames);
                commitAjax("DeleteCtrl", {
                    CallBack: function (data) {
                        if (data) {
                            var error = [];
                            $.each(data,function(index, item){
                                if(item.Success)
                                {
                                    deleteByFieldName(item.FieldName);
                                }
                                else
                                {
                                    error.push(item.FieldName)
                                }
                            });
                            if(error.lengh > 0)
                            {
                                msgBox(error.join(',') + ',删除失败');
                            }
                        }
                    }
                })
            }
        })
    }

    function insertDisplayCtrl()
    {        
        var rowToInsert = { FieldType: "NVARCHAR_MAX_", CtrlType: "TextBox", IsVisible: "是", Enable: "是" };
        $('#dg').datagrid('mfInsertRow', { row: rowToInsert });
    }

    function rowStyler(index,row)
    {
        if (row.IsDevelopField && row.IsDevelopField == 'true')
        {
            return 'color:#0F4175;';
        }
    }

    function cellStyler(value, row, index, field)
    {
        if (row.IsDevelopField && row.IsDevelopField == 'true')
        {
            return 'background-color:#F0F0F0;';
        }
    }

    function deleteByFieldName(fieldName)
    {
        var rows = $('#dg').datagrid('getRows');
        var row = $.grep(rows,function(item){
            return item.FieldName == fieldName;
        })[0];

        if(row)
            $('#dg').datagrid('mfDeleteRow', $('#dg').datagrid('getRowIndex', row));
    }
</script>

